<template>
    <v-data-table :headers="headers" :items="desserts" :expanded.sync="expanded" sort-by="calories" class="elevation-1"
        show-expand>
        <!-- 顶部插槽 -->
        <template v-slot:top>
            <v-toolbar flat>
                <v-toolbar-title>测试计划</v-toolbar-title>
                <v-divider class="mx-4" inset vertical></v-divider>
                <v-spacer></v-spacer>
            </v-toolbar>
        </template>
        <!-- 关联用例插槽 -->
        <template v-slot:[`item.testcases`]="{ item }">
            <span v-for="i in item.testcases">{{ i.name }}-</span>
        </template>
        <!-- 展开后插槽 -->
        <template v-slot:expanded-item="{ headers, item }">
            <td :colspan="headers.length">
                <h3 v-for="i in item.testcases">{{ JSON.stringify(i) }}</h3>
            </td>
        </template>
        <!-- 操作插槽 -->
        <template v-slot:item.actions="{ item }">
            <v-btn color="success" style="margin-right: 5px;" @click="buildPlan(item)">执行</v-btn>
            <v-btn color="warning" @click="deletePlan(item)">删除</v-btn>
        </template>
    </v-data-table>
</template>

<script>
export default {
    data: () => ({
        expanded: [],
        headers: [
            { text: '计划ID', align: 'start', sortable: false, value: 'id', },
            { text: '计划名称', value: 'name' },
            { text: '关联用例', value: 'testcases' },
            { text: '操作', value: 'actions', sortable: false },
            { text: '', value: 'data-table-expand' },
        ],
        desserts: []
    }),

    created() {
        this.initData()
    },

    methods: {
        // 初始化数据
        initData() {
            console.log('初始化数据')
            this.$api.plan.getPlan().then((result) => {
                console.log('result', result)
                // 将接口返回数据赋值给表格
                this.desserts = result.data.data
            }).catch((err) => {
                console.log('err', err)
            })
        },
        // 执行计划功能
        buildPlan(item) {
            this.$api.build.addBuild({ 'plan_id': item.id }).then((result) => {
                console.log('result', result)
                // 执行成功时 发起初始化数据操作
                if (result.data.code == 0) {
                    this.initData()
                }
            }).catch((err) => {
                console.log('err', err)
            })
        },
        // 删除测试计划
        deletePlan(item) {
            this.$api.plan.deletePlan({ 'id': item.id }).then((result) => {
                console.log('result', result)
                // 删除成功时 发起初始化数据操作
                if (result.data.code == 0) {
                    this.initData()
                }
            }).catch((err) => {
                console.log('err', err)
            })
        },
    }
}
</script>